Before completing this part of your application, you will add two more States;
1) A Bridge State to leave this top level application, run another module (separate Course Document) and;
2) One more output to display a report at the end of the program.
>> Select a Bridge and Return State from the Flow Tools menu and place it on the Course Map directly to the right of the Stop State.
>> Connect this State so that you program will flow through it after giving correct feedback leaving Stop disconnected once again.
 
>> Double-click on the Bridge State to open its Information Center (Flow States do not contain a View since they are used to direct the program, not to be displayed to the user).
You can use Bridge States to transfer the program flow to a another State within the same application, to another Course Document, or even to another Macintosh application.
Course Builder has the unique ability to remember the path it takes when going through Bridges. By selecting the option to return, your application will come back to the point at which the Bridge was encountered when the subprogram has finished.
>> Name this State To Part Two and Select the 'Bridge to Course Document' option.
>> In the 'Bridge to Course Named:' Field, type Part Two.
 
>> Select 'OK' to return to the Course Map.
Now, when Course Builder encounters this State, it will look on the hard drive for a Course Document named Part Two which we will create in the next section of this tutorial.
Bridging provides the ability to break your application into small documents which can be easily changed or replaced as required. There are several advantages to keeping your applications in a modular fashion:
• If you have a site-license or multiple copies of Course Builder, your application can be developed by several people simultaneously with each module connected with a Bridge;
• you can have a glossary which is accessed by several different programs;
• you can keep test segments in their own separate documents so that the questions can be updated without requiring that the rest of the program be altered; and
• this feature makes it possible to create very large programs with relatively little maintenance required.
Scoring with Course Builder
Course Builder will track the user's progress through your program and across all linked documents. Standard information including time spent in the program, total score, percent of correct answers, input for each question, number of tries, and time to answer questions are automatically tracked and can be saved in compiled report on the hard drive.
>> To automatically save a report to the hard drive, choose 'Report File…' from the Course menu.
>> Select the 'Course, Group, and Input' option to save the most inclusive report.
 
This dialog also gives other options for your course including requiring a password to launch and run the application (passwords are set up in the next report dialog).
>> Select 'OK' to return to the Course Map.
You can develop custom reports with your own information and format in either Text or Graphic Design Outputs which can be set up to automatically print if the machine is connected to an output device.
Creating a Custom Report
The final State we will add before closing this segment is an Output which displays a custom report once the user has returned from the second module.
>> Select a Design and Text Output State from the Output tools and place it on the Course Map directly below To Part Two.
>> Use Routes to connect it into your course between the Bridge and Stop States.
>> Name this State "Report" and then select 'Next'
This dialog contains options specific to Text Output Windows.
>> If your computer is connected to an output device, select the 'Print Text Window' option to print a copy of this custom report.
>> Also select the following options: 'Text Editable', 'Text Scrollable', and 'Save Text in Report'.
 
The 'Text Editable' and 'Save Text in Report' options allow you to ask the user essay question or solicit comments which will be saved for review.
>> Select 'OK' to return to the Course Map.
Selecting Variables
>> Open the View of Report and click on the Stopwatch Icon to add a Continue Button for this display.
>> Choose 'Show Text Window' (Command T) from the Design Menu.
>> Drag the Title Bar to reposition this window and use the Grow Box in the lower right corner to resize it to your liking.
If you click off the Text Window and it disappears (is hidden by the Design Window), just choose 'Show Text Window' (Command T) from the Design Menu again.
>> Type the following into the Text Window:
 
Note that this text information contains variable substitution. At the points where you wish to display information from variables:
>> Position the cursor at the point you wish to display the variable and hold down the mouse button and press the 'option' key on the keyboard.
>> Select the variable type you want from the Variable Selection Dialog
>> Select the appropriate State and Variable for substitution when you are using Output, Input, and Group variables. (When selecting Course Variables, you will not have a list of States).
The space at the bottom of this Text Window will be left for any user comments to be saved in the Report File.
>> Choose 'Return to Course Map' (Command M) from the Design Menu when your course is as you like.
Now that this section is complete, you'll save it as a stand-alone application, one which you will be able to copy to a floppy disk and distribute to your colleagues (once you have completed Part Two)
>> Choose 'Save As…' from the File Menu.
 
>> This time, select the 'Application' option at the bottom of this dialog.
>> Select 'Replace' when Course Builder displays a dialog requesting confirmation to save over top of the original Example Application file.
>> Select 'OK' to return to the Course Map.
NOTE: You can always go back into a Course Application by first opening the Course Builder program, choosing 'Open…' from the File menu, and selecting your application from the list presented. If your are running System 7, from the Finder, you can click on the application icon and 'drag and drop' it onto the Course Builder program icon. You can also resave an application as a document if you like.
>> Choose 'Quit' (Command Q) from the File menu to exit and close the Course Builder program.
>> Take a break!!! You've done some good work here!
NOTE: Before you run your application, you need to complete Part Two (to which the top level bridges).
Creating Part Two
This section will introduce Calculator States, Conditional Routing, placing sprites based on user input, and setting up graphics which are draggable by the user.
You will show a picture of the Solar System and ask the user to type in the distance between the Sun and the Earth. You will provide a measuring device which the user can drag about on the display to find out the answer. You will give the user individual feedback based on the answer given.
>> Open Course Builder and select 'New' from the opening dialog. If the Course Builder program is already open, choose 'New' (Comand N) from the File Menu.
>> Choose 'Report File…' from the Course Menu and select the 'Course, Group, and Input' option so that you report file will include statistics from Part Two.
>> Place a Start State at the top of the Course Map and name it Start Part Two.
>> Place a Graphic Design Output Directly below the Start State and name it Solar Overview.
>> Select 'Hide Menu Bar' from the Design Runtime options.
Now when this section of your program runs, the menu bar will not be visible to the user.
>> Select 'OK' to return to the Course Map.
Overlaying Graphics
>> Open the View of Solar Overview and import the PICT file titled Background.
>> Click on the title, byline, and horizontal lines to select them and then choose 'Cut' (Comand X) from the Edit menu.
If you inadvertently cut the entire background just choose 'Undo' (Comand Z) from the Edit menu and try again.
>> Position the background in the upper left corner of the display.
If necessary, hold down the command key while pressing the spacebar to hide the Design Window tools.
Notice that when you have selected to Hide the Menu Bar, that the menu is also hidden when you hide the tools - menu command keys are still active though.
>> Import the PICT file titled Planet labels and position this graphic on top of the background picture to identify the planets.
 
>> Select a transition for this display and designate a transition time.
>> Select the Stopwatch icon to select a 'Click anywhere to continue' synchronization.
>> Choose 'Return to Course Map' (Comand M) from the Design menu.
Setting the Stage
>> Place another Graphic Design Output State directly below Solar Overview and name this State Measure Distance.
>> Open the View of Measure Distance and import the PICT file titled 'Measure.Bkgnd'.
>> Select a 'Rectangular Iris' transition at a 'Normal' speed for this display.
As you see, this graphic will give your users instructions for what you expect them to do at this point. These instructions request the user to drag a ruler to measure distance. You will create this ruler as a sprite (since it will be moved across an unchanging background).
>> Either click on the 'Animate' button in the lower left of the display or choose 'Show Animation Library (Comand L) from the Design Menu.
>> Import the PICT titled 'Ruler' into the Animation Library in Sprite Reference #1.
>> Choose 'Add Sprite' (Comand A) from the Animate menu.
Since the user will be providing the motion (dragging the ruler) you will not designate any additional keyframes of animation for this Output.
>> Click on the sprite to drag it to the lower left of the display.
>> Choose 'Return to Course Map' (Comand M) from the Animate menu.
Setting Sprites to be Draggable
You now need to tell Course Builder that you want the user to be able to move Sprite # 1 in the Output State titled Measure Distance. You will do this by using a Calculator State to make that particular sprite draggable.
  >> Select a Calculator State from the
Function Tools menu and place this
State directly to the right of Solar
Overview.
>> Connect your program with Routes as shown in the following picture.
 
>> Save your work as a documented named Part Two.
 
About Calculators
>> Double-click on the Calculator State to open it.
Just like Flow States, Calculator States do not have a separate Information Center and View.
>> Name this Calculator Set Sprite Drag.
When you first look at a Calculator, it appear very complicated. However, this can be one of the most powerful states in Course Builder - you can use this state to add up scores, manipulate the way a display looks based on user input, and even to give partial credit on questions based on the number of times a user has tried to answer it. As you continue in your courseware development, you will make significant use of the Calculator State.
Take just a moment to look it over before using it in your program - it’s really not all that complex if you break it down.
 
As with all states, the first field is for the State Name. Next, there are five radio buttons for Show Calculation. Each Calculator State can hold up to 5 different equations (calculations), these buttons allow you to move between the 5 calculations. For example, to see the third equation, you simply select the radio button to the left of number 3.
The next field is where you enter the equation. On the left of the equal sign you will select a variable from the Variable Selection Dialog. On the right side of the equal sign you will use the calculator buttons to designate an operation to change the value your selected variable holds. The variable you select and what you do with it depend entirely on what you want to accomplish.
Below the equation field are the buttons which you will press to create the right side equation operations. This row of buttons are the same variables available in the Variable Selection Dialog.
 
The second and third rows are mathematical and trigonomic functions and the logic operator AND. Unless you are creating and manipulating complex graphic images, you probably will not use the trigonomic functions. You may have use of some of the other functions like ‘abs(’ - take the absolute value of a number (if the number is negative, it will make it a positive value) or another useful function is ‘int(’ - gives a whole number value if the variable is a fraction.
 
The fourth row are simply the old familiar arithmetic operators: plus, minus, multiply, divide and an operator which will raise the value by a power (xx). Notice also that you have right and left parenthesis, plus the logic operator OR.
 
Last, but not least are the buttons which allow you to cut, copy and paste, check calculations, Cancel everything or select OK and save changes.
 
You will set up variables in this Calculator which will allow Sprite #1 (in the Animation Library of Measure Distance) to be draggable by the user.
Working with Variables
>> Click in the left-hand side of the equation field to bring up the Variable Selection Dialog.
Selecting variables for the Calculator is just like selecting them for variable substitution - first select the variable category and then select the specific variable of interest.
>> Select the Output Variables option since the variable you want to affect is a sprite in the Graphic Design Output State, Measure Distance.
You are now presented with a list on the left of all the named Output States in your program and the list on the right of all the variables associated with Outputs.
Note that most of the variables associated with Output States are referencing sprites (i.e., position, visibility, draggability, pose, etc.) Since there are 32 sprite reference positions in Course Builder, the set of sprite variables is replicated for each sprite reference number.
>> Select the Output State Measure Distance from the list on the left.
>> Select the Output Variable 'Sprite 1 drag from the list on the right.
 
>> Select 'OK' to return to the Calculator and complete your calculation.
A Sprite is designated as draggable by setting it equal to a constant; 0-no dragging allowed; 1-draggable in any direction; 2-draggable constrained in a horizontal field; and, 3-draggable constrained in a vertical field.
>> Click on the right side of the equation and then select the 'cons' (constant) button calculator button on the first row of buttons.
>> Type a '1' in the edit field to make your ruler sprite draggable in any direction.
 
>> Select 'OK' to return to the Calculator with your calculation complete.
 
>> Good Work! - you've completed your first calculation so select 'OK' to return to the Course Map.
>> Save!
Asking for Input
Anytime you are using draggable sprites you need to follow your Output State with an Input State. This will hold up the program flow while you allow the user to position the sprite. The program will continue once it receives the designated type input.
Since you are providing the ruler as a tool to measure distance you will ask for numeric keyboard input for the answer.
>> Choose a Numeric Input from the Input Tools menu and place it on the Course Map directly below Measure Distance. Use a Route to connect the two States.
>> Open the Information Center of this Input and name it Enter Distance.
>> If you are working on a Macintosh in 256-color mode, you may wish to change the Input Window color by clicking on 'Change Colors'. Keep in mind that this window will overlay the Solar System picture so a pastel color may be a good choice.
>> Select 'Next' and enter the question: 'Type your answer here. Press the return key when done.'
The correct answer is 93 however, you will probably want to give a range which will be judged as a correct response. For this example we'll accept any number from 90 to 95 as correct.
Since there are two exits from this Input State, you have two Numerical Answer fields in which you can designate matching values. Beside each field are comparators which allow you to carefully define matching criteria.
>> Select the '‚â•' comparator to the left of the first field and type 90 as the matching answer.
>> Select the '≤' comparator in the middle of the first field and type 95 in the field to the right.
 
Exit one will now be taken if the number typed in is greater than or equal to 90 and less than or equal to 95.
You will leave the second answer field blank so that any other answer typed in will take Exit 2. Since Course Builder allows up to 10 individual Exits, you can get very detailed with your judging using different comparisons for each Exit.
>> Select 'Next' to display the Scoring Dialog for this Input.
>> Click in the #1 box to designate it as the correct answer. Assign 10 points if answered correctly.
>> Select 'OK' to return to the Course Map.
>> Open the View of this Input State and use the grow box in the lower right to make the dialog as small as possible while still displaying all the words. Since a return will activate the 'OK' button, drag up to cover it on the dialog.
Be careful not to cover over your solar system picture or ruler with this dialog. If you are working on a 9" monitor, this dialog works best in the lower right corner.
 
>> When you have the dialog where you like, press the return key to return to the Course Map.
>> Save your work!
Providing Feedback
Now all you need is to give the user feedback based on the answer given.
For feedback to an incorrect response we'll use a Radio Button Input State as a quick and easy way to display feedback that the answer given was not correct.
>> Place a Radio Button Input State below and to the right of Enter Distance.
>> Open the Information Center of this Radio Button Input and name the State Incorrect Distance.
>> Change the number of Answer Routes to 1.
>> Select 'Next' to display the Question Dialog and type the following into the question field: 'No, InputAnswer{Enter Distance} million miles is not a correct answer. Carefully position the ruler and try again.'
Notice that you will be using variable substitution (InputAnswer{Enter Distance}) in this dialog. You select the variable the same as in Outputs - position your cursor, hold the option key down while clicking the mouse, and select the variable you want to display.
 
>> Select 'Next' to display the Scoring Dialog.
>> Deselect the 'Report Results' option since you are using this Input as feedback, not a question.
By deselecting this option, statistics about this Input State will not be saved for inclusion in the report for this program.
>> Select 'OK' to return to the Course Map.
Since Input States overlay the background of the Output State to which they are connected, you will temporarily connect this feedback state directly to Measure Distance to position it for display before connecting it in its proper sequence.
>> Drag a Route from the Exit of Measure Distance to the Entrance of Incorrect Distance.
>> Open the View of Incorrect Distance to position this dialog where you want it displayed at runtime.
>> Select 'OK' to return to the Course Map.
>> Now move this temporary Route from the Exit of Measure Distance to the Exit of Enter Distance.
>> Drag a Route from the Exit of Incorrect Distance back up to the Entrance of Measure Distance to give your user another try.
 
More Feedback!
Now let's set up feedback for a correct response. In this feedback we will reinforce the answer by demonstrating how the correct answer was found.
>> Place a Graphic Design Output on the Course Map below and to the right of Enter Distance.
>> Name this State More Feedback and connect it to Exit 1 of Enter Distance.
>> Select a Normal 'Wipe Top to Bottom' transition for this Output.
You will use the same graphic background which is contained in Measure Distance but without the labels. Course Builder allows you to copy items from one State and place them in the exact same position in another State. Carefully follow these directions.
>> Open the Output State Measure Distance and click once on the background picture to select it (do not select the labels which are a separate grouped item in this graphic).
>> Choose 'Copy' (Comand C) from the Edit menu to copy the graphic to the clipboard and then choose 'Return to Course Map' (Comand M) from the Design menu.
>> Open your new Graphic Design Output More Feedback and before clicking the mouse anywhere else, choose 'Paste' (Comand V) from the Edit menu.
This has pasted a copy of your background picture in the same location on the following screen so when your program runs, the display will not 'jump'.
You could have done the same thing by duplicating the Output State and then removing the parts you did not want (including the graphic in the Animation Library).
>> Import the PICT file titled 'Dist.Feedback' and carefully position this graphic on top of your background.
>> Click on the Stopwatch icon in the bottom toolbar to select a 'Click Anywhere to Continue' Synchronization.
>> Choose 'Return to Course Map' (Comand M) from the Design menu.
Finishing it up.
Notice that the graphic in More Feedback instructs the user to 'Click anywhere to see a report of your progress.' Remember that you used a Bridge and Return State in the top level application to come out and run Part Two.
When program flow encounters a Stop State, Course Builder knows that it is time to return to the application which initiated the Bridge.
>> Place a Stop State on the Course Map directly below More Feedback and connect the two States with a Route.
>> Save your work!
Giving the User a way out!
When asking questions which require a specific answer or range of answers, you want to try to anticipate the user who for some reason just can't get the correct answer.
In this example, we will use a Conditional Route which checks to see how many times the user has attempted the question. If the user has tried more than two times, we will route the course to a screen which shows the solution.
We already have a State which does something similar - our More Feedback State. We just need to change the response from 'Good Job!' to something more appropriate.
Using Sprite Poses
You can let this single State do double duty by using sprites to give the response. Based on the conditions set up in your course you will either display a sprite saying 'Good Job', or one saying 'Sorry, after 2 tries you didn't answer correctly'
You will use a Calculator State to change the sprites and a Conditional Route to tell the program when you want them changed.
>> Place a Calculator State on the Course Map directly to the right of More Feedback.
>> Drag a 2nd Route from Exit 2 of Enter Distance to the Entrance of this Calculator and a Route from its Exit to the Entrance of More Feedback.
 
Setting up Conditional Routes
When you have two Routes leading from a single Exit node, Course Builder will make a random selection of which Route to take. By making one of the Routes 'Conditional' Course Builder will recognize that it must make decisions of the direction based on the contents of the Route.
>> Double-click on the body of the Route leading to the Entrance of the Calculator State.
This brings up a dialog which allows you to set up conditions which must be met before your program's flow will follow the Route.
The information at the top of this dialog lets you know which States this Route connects. (Note that we have not yet named the Calculator State so it is shown as 'Untitled').
In the fields below this information is where you will select variables for comparison. The field between the variable fields is where you select the Relational Operator.
Relational Operators are used to compare (test) the variable on the left side to the variable or constant on the right side of the operator (i.e., is Variable A = Variable B or, is Variable A is greater than Variable B). The result is either TRUE (condition has been met - take this Route) or FALSE (do not take this Route).
The condition you will look at is to see how many times the user has attempted to answer the question. So, you will first select the variable that holds the information you want to compare.
>> Click in the left side of the first condition field.
This Variable Selection Dialog must look pretty familiar to you by now!
>> Since the variable you are interested in is associated with Inputs, select 'Input' as the Variable type.
>> Select the Input State titled 'Enter Distance' and select the variable 'input loops through' which tells how many times the dialog has been displayed.
 
>> Select 'OK' to return to the Condition Dialog which has been updated with your selection.
>> Click in the right side of this first condition field to set up your comparison.
>> Since you are looking for the number of 'loops through' to be greater than 2, select the 'Constant' option and type in '2'.
>> Now select the Relational Operator between the two fields of '>' (greater than).
 
Course Builder will read this condition as: "If the user has gone through Enter Distance more than two times, take this Route."
While this example will check only one condition, each Conditional Route can evaluate up to five individual comparisons. You can use the 'If/Then Connector' to set up sophisticated logic for testing.
By clicking on a circle, you can drag down to connect two conditions so that both must be TRUE before Course Builder takes the Route.
>> Select 'OK' to return to the Course Map.
Notice now that your Route is no longer solid black which indicates it is conditional. (Conditional Routes appear red when viewed in 256-colors).
Setting up Sprite poses.
>> Open the View of More Feedback.
We will make only the part of this display which changes a sprite.
>> Click on the 'Good Job!' paragraph to select it.
>> Choose 'Cut' (Comand X) from the Edit menu to remove this information from the Design Window.
>> Go to the Animation Library for this State and choose 'Paste' (Comand V) from the Edit menu to place your words in the first pose of Sprite reference #1.
>> Choose 'Add Sprite' (Comand A) from the Animate menu and position the sprite on the display.
>> Click on the letter 'B' at the bottom of the Animation Library window and choose 'Paste' (Comand V) again.
This places the same paragraph in Pose B of Sprite reference #1. You will change the words in Pose B to read what you will tell your users if they give an incorrect answer more than 2 times.
>> Use the Text tool to change Pose B to read: "No, I'm sorry, that is still not correct. You use the ruler to see that the sun is 93 million miles (105 million km) away from the Earth."
 
Since your 'movement' in this animation will come from a Calculator (changing the Pose based on following your Conditional Route), you will not add any additional frames of animation.
>> Return to the Course Map
Change the Pose with a Calculator
>> Open the Calculator State and name it Tries >2.
>> Click on the left side of the Equation field to select the variable you want to affect with this Calculator.
>> Since you are changing the pose of a sprite, select an 'Output' variable type.
>> Select the Output State 'More Feedback' from the list on the left and the variable 'sprite 1 pose' from the list of Output Variables.
>> Select 'OK' to return to complete this equation.
>> Click on the right side of the equation field and select the 'CONS' button from the top row.
Each sprite can have up to 16 different poses (A-P). Since the calculator uses number instead of letters, each pose is referenced by a numerical value, pose A=1, pose B=2, … pose P=16.
>> Since you want to display pose B if the program goes through this calculator, type 2 in the Constant field.
>> Select 'OK' to return to the Calculation Dialog and 'OK' again to return to the Course Map.
>> Once again - Save your work!
Testing your program
You are now ready to try out your development! Choose 'Run' (Comand R) from the Course menu. Congratulations! You've completed Part Two of this tutorial and are ready to try running your program as a stand-alone application.
>> Choose 'Quit' (Comand Q) from the File menu to exit Course Builder's authoring environment.
>> Make sure that both Example Application and Part Two are within the same folder on the desktop.
 
Notice that the icon for a Course Document is different than for an application. This means that this file either requires Course Builder to be opened or to be bridged to from another Course Builder application.
>> Double-click the 'Example Application' icon
This time you do not see the Course Builder's development tools, only the good work you did to put this course together.
Note that Course Builder seamlessly transitioned into Part Two and when part two completed, returned to display your report.
When your program is complete, look in the top level folder on the Macintosh desktop to find the report that was generated by your program. (Course Builder supports several options for naming reports as well as designating folders for automatic placement).
  You can use the Report Reader included with this
Evaluation package to open the report.
Well Done!!!!
You have now completed your program and have learned quite a bit about developing stand-alone Course Builder applications.
You may now put this program (or one of your own) on floppy-disk to impress your friends and amaze your colleagues! When you are distributing Course Builder applications, make sure you include all the files required for running them - in this case Part Two and CBS Sounds.
Feel free to contact us should you have any questions, comments, or need additional information.
We look forward to working with you as you develop applications which span the capabilities of this powerful authoring system.
